<template>
  <div class="orderContent flexs">
    <div class="baseInfo">
      <div class="d_orderDetails m0">
        <div class="item">
          <div class="cTitle">
            <h3>订单信息</h3>
          </div>
          <dl>
            <dt>订单单号</dt>
            <dd>{{ orderInfos.baseData.xieYiShuHao || '--' }}</dd>
          </dl>
          <dl>
            <dt>订单类型</dt>
            <dd>{{ orderInfos.baseData.orderTypeName }}</dd>
          </dl>
          <dl>
            <dt>客户名称</dt>
            <dd>{{ orderInfos.baseData.customerName || '--'}}</dd>
          </dl>
          <dl>
            <dt>客户单号</dt>
            <dd>{{ orderInfos.baseData.customerBillNo || '--'}}</dd>
          </dl>
          <dl>
            <dt>合同号</dt>
            <dd>{{ orderInfos.baseData.contractNo || '--'}}</dd>
          </dl>
        </div>
        <div class="item">
          <div class="cTitle">
            <h3>产品信息</h3>
          </div>
          <dl>
            <dt>产品名称</dt>
            <dd>{{ orderInfos.baseData.orderProductName || '--' }}</dd>
          </dl>
          <dl>
            <dt>产品编码</dt>
            <dd>{{ orderInfos.baseData.productCode || '--' }}</dd>
          </dl>
          <dl>
            <dt>产品板面</dt>
            <dd> {{ orderInfos.baseData.printingSurface || '--' }}</dd>
          </dl>
          <dl>
            <dt>产品版本</dt>
            <dd> {{ orderInfos.baseData.productVersions || '--' }}</dd>
          </dl>
          <dl>
            <dt>产品库存</dt>
            <dd> {{ orderInfos.stockQuantity }}</dd>
          </dl>
        </div>
        <div class="item">
          <div class="cTitle">
            <h3>业务信息</h3>
          </div>
          <dl>
            <dt>标签套数</dt>
            <dd>{{ orderInfos.baseData.taoZhuangQuantity || '--' }}<span class="unit">{{orderInfos.baseData.productUnion}}</span></dd>
          </dl>
          <dl>
            <dt>标签枚数</dt>
            <dd>{{ orderInfos.baseData.tagSumQuantity || '--' }}<span class="unit">枚</span></dd>
          </dl>
          <dl>
            <dt>套装单价</dt>
            <dd>{{ orderInfos.baseData.taoZhuangPrice || '--' }}<span class="unit">元</span></dd>
          </dl>
          <dl>
            <dt>套装总金额</dt>
            <dd>{{ orderInfos.baseData.taoZhuangPrice*orderInfos.baseData.taoZhuangQuantity || '--' }}<span class="unit">元</span></dd>
          </dl>
          <dl>
            <dt>实际单价</dt>
            <dd>{{ orderInfos.baseData.actualPrice || '--' }}<span class="unit">元</span></dd>
          </dl>
          <dl>
            <dt>实际总金额</dt>
            <dd>{{ orderInfos.baseData.practicalPayMoney || '--' }}<span class="unit">元</span></dd>
          </dl>
          <dl>
            <dt>优惠金额</dt>
            <dd>{{ orderInfos.baseData.discountsMoney || '--' }}<span class="unit">元</span></dd>
          </dl>
        </div>
        <div class="item">
          <div class="cTitle">
            <h3>数据信息</h3>
          </div>
          <dl>
            <dt>数据来源</dt>
            <dd>{{ orderInfos.baseData.dataComeFromName || '--' }}</dd>
          </dl>
          <dl>
            <dt>数据数量</dt>
            <dd>{{ orderInfos.baseData.tagDataQuantity || '--' }}</dd>
          </dl>
          <dl>
            <dt>数据状态</dt>
            <dd>{{ orderInfos.baseData.dataProduceState || '--' }}</dd>
          </dl>
        </div>
        <div class="item">
          <div class="cTitle">
            <h3>套装关系</h3>
          </div>
          <labelTree :tree-data="orderInfos.packageRelations" />
        </div>
        <div class="item">
          <div class="cTitle">
            <h3>产品包装</h3>
          </div>
          <dl>
            <dt>成品样式</dt>
            <dd>{{ orderInfos.productData.productStyleName || '--' }}</dd>
          </dl>
          <dl v-if="orderInfos.productData.productStyle !== 1">
            <dt>出标方向</dt>
            <dd>{{ orderInfos.productData.outDirectionName || '--' }}</dd>
          </dl>
          <dl v-if="orderInfos.productData.productStyle === 2">
            <dt>卷向</dt>
            <dd>{{ orderInfos.productData.scrollDirectionName || '--' }}</dd>
          </dl>
          <dl>
            <dt>贴标方式</dt>
            <dd>{{ orderInfos.productData.tagAffixWayName || '--' }}</dd>
          </dl>
          <dl v-if="orderInfos.productData.productStyle === 2">
            <dt>卷芯大小</dt>
            <dd> {{ orderInfos.productData.mandrelSize || '--' }}<span class="unit">mm</span></dd>
          </dl>
          <dl v-if="orderInfos.productData.productStyle === 2">
            <dt>外直径不超过</dt>
            <dd>{{ orderInfos.productData.notOverDiameter || '--' }}<span class="unit">mm</span></dd>
          </dl>
          <dl v-if="orderInfos.productData.productStyle === 2">
            <dt>每卷等于</dt>
            <dd>{{ orderInfos.productData.pageEqualTags || '--' }}<span class="unit">{{orderInfos.baseData.productUnion}}</span></dd>
          </dl>
          <dl v-if="orderInfos.productData.productStyle !== 2">
            <dt>每张等于</dt>
            <dd>{{ orderInfos.productData.pageEqualTags || '--' }}<span class="unit">{{orderInfos.baseData.productUnion}}</span></dd>
          </dl>
          <dl v-if="orderInfos.productData.productStyle !== 2">
            <dt>每包等于</dt>
            <dd>{{ orderInfos.productData.packageEqualPages || '--' }}<span class="unit">张</span></dd>
          </dl>
          <dl>
            <dt>每箱等于</dt>
            <dd>{{ orderInfos.productData.boxEqualPackages || '--' }}<span class="unit">{{ orderInfos.productData.productStyle !== 2 ? "包" : "卷" }}</span></dd>
          </dl>
          <dl>
            <dt>每箱共计</dt>
            <dd>{{ orderInfos.productData.boxEqualTags || '--' }}<span class="unit">{{orderInfos.baseData.productUnion}}</span></dd>
          </dl>
        </div>
        <div class="item">
          <div class="cTitle">
            <h3>订单备注</h3>
          </div>
          <div class="d_remark">
            {{ orderInfos.baseData.orderRemark  || '暂无备注' }}
          </div>
        </div>
        <div class="item">
          <div class="cTitle">
            <h3>其他信息</h3>
          </div>
          <dl>
            <dt>业务员</dt>
            <dd>{{ orderInfos.baseData.salesmanName || '--' }}</dd>
          </dl>
          <dl>
            <dt>联系电话</dt>
            <dd>{{ orderInfos.baseData.salesmanMobile || '--' }}</dd>
          </dl>
        </div>
      </div>
    </div>
    <div class="d-tagMore">
      <div class="items" v-for="item in orderInfos.productData.tagDataList" :key="item.productTagCode">
        <div class="title" @click="shrink(item)">
          <h3>{{ item.productTagName }}</h3>
          <span class="pointer">
            <i v-if="!item.isShow" class="el-icon-arrow-down" />
            <i v-else class="el-icon-arrow-up" />
          </span>
        </div>
        <div class="content" v-if="!item.isShow">
          <ol   class="list list_3">
            <dl>
              <dt>标签形状</dt>
              <dd>{{ item.tagShapeName || '--' }}</dd>
            </dl>
            <dl>
              <dt>标签尺寸</dt>
              <dd>{{ item.tagWidth + '*' + item.tagHeight }}<span class="unit">mm</span></dd>
            </dl>
            <dl>
              <dt>标签R角</dt>
              <dd>{{ item.tagBorderRadius+'mm' || '--' }}</dd>
            </dl>
            <dl>
              <dt>标签边空</dt>
              <dd>{{ item.tagBorder+'mm' || '--' }}</dd>
            </dl>
            <dl>
              <dt>被贴物</dt>
              <dd>{{ item.postedContent || '--' }}</dd>
            </dl>
            <dl>
              <dt>套装枚数</dt>
              <dd>{{ item.matchQuantity || '--' }}<span class="unit">枚</span></dd>
            </dl>
          </ol>
          <div v-for="cc in item.layerDataList" :key="cc.layerClientCode" class="item">
            <div class="title">
              <h3>{{ cc.printingLayerName }}</h3>
            </div>
            <ol class="list list_3">
              <dl>
                <dt>材料</dt>
                <dd>{{ cc.printingMaterialName }}</dd>
              </dl>
              <dl>
                <dt>底膜颜色</dt>
                <dd>{{ cc.baseFilmColorName || "--" }}</dd>
              </dl>
              <dl>
                <dt>数码位数</dt>
                <dd>{{ cc.technoPlaces || "--" }}</dd>
              </dl>
              <dl>
                <dt>条码位数</dt>
                <dd>{{ cc.barCodePlaces || "--" }}</dd>
              </dl>
              <dl>
                <dt>数码颜色</dt>
                <dd>{{ cc.technoColor ==0?"黑码":"彩码" }}</dd>
              </dl>
              <dl>
                <dt>留胶材质</dt>
                <dd>{{ cc.liuJiaoTextureName || "--" }}</dd>
              </dl>
              <dl>
                <dt>表面要求</dt>
                <dd>
                  <div class="spanList" v-if="cc.surfaceRequireNameList.length>0">
                    <span v-for="m in cc.surfaceRequireNameList" :key="m" >{{ m }}</span>
                  </div>
                  <div v-else>--</div>
                </dd>
              </dl>
              <dl>
                <dt>刮开图层颜色</dt>
                <dd>{{ cc.scrapingCoatingColorName || "--" }}</dd>
              </dl>
              <dl>
                <dt>刮开文字颜色</dt>
                <dd>{{ cc.scrapingWordColorName || "--" }}</dd>
              </dl>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import labelTree from '@/components/labelTree'

export default {
  name: 'OrderInfo',
  components: { labelTree },
  props: {
    orderInfos: {
      type: Object
    }
  },
  data() {
    return {}
  },
  created() {
  },
  mounted() {
  },
  methods: {
    // 控制标签内容层显示隐藏
    shrink(item) {
      this.$set(item, 'isShow', !item.isShow)
    }
  }
}
</script>
<style lang="scss" scoped>
.orderRemark {
  line-height: 24px;
  padding-bottom: 16px;
}

.listInfo {
  li {
    margin-bottom: 10px;
  }

  .labelTT {
    width: 100px;
    display: inline-block;
    text-align: left;
    white-space: nowrap;
  }
}

.orderContent {
  width: 100%;
  flex: 1;
  .baseInfo {
    width: 320px;
    padding: 16px;
    margin-right: 16px;
    border: 1px solid #E6E6E6;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
  }
}
</style>
